<template>
	<view class="client">
		<view class="client-back">
			
		</view>
		<view v-if="list && list.length > 0" class="clientMain">
			<view class="" v-for="(item, index) of list" :key="index">
				<view class="clientMain-li back2" v-if="item.agent_valid == 1">
					<view class="clientMain-li-top">
						<image class="clientMain-li-top-img" src="../../../static/manufacturers/address.png" mode=""></image>
						<view class="clientMain-li-top-right">
							<view class="clientMain-li-top-right-top">
								<text class="clientMain-li-top-right-txt">收货人</text>
								<text>:</text>
								<text class="clientMain-li-top-right-top-txt font_blod">
									<text>{{item.order_name}}</text>
									<text style="margin-left: 24rpx;">{{item.order_phone}}</text>
								</text>
							</view>
							<view class="clientMain-li-top-right-btm">
								<text class="clientMain-li-top-right-txt">收货地址</text>
								<text>:</text>
								<text class="clientMain-li-top-right-btm-txt">{{item.order_address}}</text>
							</view>
						</view>
					</view>
					<view class="clientMain-li-btm">
						<text class="clientMain-li-btm-txt1 font_blod">有效合作中</text>
						<text class="clientMain-li-btm-txt2 font_blod" @click="cli_go_record(item, index)">查看历史发货记录</text>
					</view>
				</view>
				
				<view class="clientMain-li back1" v-else>
					<view class="clientMain-li-top">
						<image class="clientMain-li-top-img" src="../../../static/manufacturers/address.png" mode=""></image>
						<view class="clientMain-li-top-right">
							<view class="clientMain-li-top-right-top">
								<text class="clientMain-li-top-right-txt">收货人</text>
								<text>:</text>
								<text class="clientMain-li-top-right-top-txt color-2 font_blod">
									<text>{{item.order_name}}</text>
									<text style="margin-left: 24rpx;">{{item.order_phone}}</text>
								</text>
							</view>
							<view class="clientMain-li-top-right-btm">
								<text class="clientMain-li-top-right-txt">收货地址</text>
								<text>:</text>
								<text class="clientMain-li-top-right-btm-txt color-2">河南省郑州新郑市中原电商大厦a座</text>
							</view>
						</view>
					</view>
					<view class="clientMain-li-btm">
						<text class="clientMain-li-btm-txt1 clientMain-li-btm-txt3 font_blod">退出合作</text>
						<text class="clientMain-li-btm-txt2 clientMain-li-btm-txt4 font_blod" @click="cli_go_record">查看历史发货记录</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="">
			<view class="yPopNone">
				<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode=""></image>
				<view class="yPopNoneTxt">
					暂无客户列表
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				list: []
			}
		},
		mounted() {
			// 获取平台客户列表
			this.getPlatformUserList()
		},
		methods: {
			// 跳转发货记录
			cli_go_record (item, index) {
				let id = item.id
				uni.navigateTo({
					url: '/pages/manufacturers/clientRecord/clientRecord?id=' + id
				})
			},
			// 获取平台客户列表
			getPlatformUserList () {
				uni.request({
					url: allapi.getPlatformUserList,
					data: {
						factoryId: this.factoryId
					},success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.list = dat
					}
				})
			}
		}
	}
</script>

<style scoped>
	.client-back {
		height: 376rpx;
		background: linear-gradient(360deg, rgba(115, 223, 198, 0) 0%, #5DD4D6 100%);
	}
	.clientMain {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	.clientMain-li {
		height: 260rpx;
		margin: 24rpx;
		padding: 32rpx 36rpx;
		display: flex;
		flex-direction: column;
	}
	.back1 {
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/16.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.back2 {
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/17.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.clientMain-li-top {
		display: flex;
		align-items: center;
		flex: 1;
	}
	.clientMain-li-top-img {
		width: 32rpx;
		height: 32rpx;
	}
	.clientMain-li-top-right {
		flex: 1;
		font-size: 24rpx;
		color: #999999;
		margin-left: 18rpx;
	}
	.clientMain-li-top-right-txt {
		width: 110rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: justify;
		text-align-last: justify;
	}
	.clientMain-li-top-right-top {
		display: flex;
		align-items: center;
	}
	.clientMain-li-top-right-btm {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
	}
	.clientMain-li-top-right-top-txt {
		font-size: 32rpx;
		color: #333333;
		margin-left: 10rpx;
		flex: 1;
	}
	.clientMain-li-top-right-btm-txt {
		flex: 1;
		color: #333333;
		font-weight: 400;
		margin-left: 10rpx;
	}
	.clientMain-li-btm {
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 50rpx;
	}
	.clientMain-li-btm-txt1 {
		font-size: 28rpx;
		color: #5DD4D6;
	}
	.clientMain-li-btm-txt2 {
		width: 256rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: #5DD4D6;
		border-radius: 35rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.clientMain-li-btm-txt3 {
		color: #999999;
	}
	.clientMain-li-btm-txt4 {
		background: #CCCCCC;
		color: #FFFFFF;
	}
	.color-2 {
		color: #666666;
	}
</style>
